<template>
    <div class="homeindex">
 <el-container>
  <el-header ><Header isxg="isxg" @changexg="changebtn" :userinfo=userinfo></Header></el-header>
  <el-container>
    <el-aside width="250px" class="aside"><Side /></el-aside>
    <el-main><router-view/></el-main>
  </el-container>
</el-container>
      <!-- 编辑信息模块 -->
<div class="bianj" v-if="isxg">

<el-dialog title="修改信息" :visible.sync="isxg">
   <el-form :model="userinfo" status-icon ref="chong" label-width="100px" class="demo-ruleForm">
            <el-form-item label="地址">
                <el-input  v-model="userinfo.addr" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="生日">
                <div class="block">
    <el-date-picker
      v-model="userinfo.birthday"
      type="datetime"
      placeholder="选择日期时间"
      align="right">
       <!-- :picker-options="pickerOptions" -->
    </el-date-picker>
  </div>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="userinfo.gender" label="男">男</el-radio>
               <el-radio v-model="userinfo.gender" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input  v-model="userinfo.nickName" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
           <el-input type="password" v-model="userinfo.password" placeholder='请输入密码' show-password></el-input>
           </el-form-item>
  <!-- <el-button type="primary" class="btn" @click="xgbtn">确定</el-button> -->
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isxg = false">取 消</el-button>
    <el-button type="primary" @click="xgbtn">确 定</el-button>
  </div>
</el-dialog>

<!-- <i class="el-icon-close" style="margin-right:5px;" @click="isxg=false" slot="prefix"></i> -->
 <!-- <el-form :model="userinfo" status-icon ref="chong" label-width="100px" class="demo-ruleForm">
            <el-form-item label="地址">
                <el-input  v-model="userinfo.addr" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="生日">
                <div class="block">
    <el-date-picker
      v-model="userinfo.birthday"
      type="datetime"
      placeholder="选择日期时间"
      align="right">
        :picker-options="pickerOptions" 
    </el-date-picker>
  </div>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio v-model="userinfo.gender" label="男">男</el-radio>
               <el-radio v-model="userinfo.gender" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input  v-model="userinfo.nickName" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
           <el-input type="password" v-model="userinfo.password" placeholder='请输入密码' show-password></el-input>
           </el-form-item>
  <el-button type="primary" class="btn" @click="xgbtn">确定</el-button>
</el-form> -->
</div> 
<!-- 班级弹出 -->
<div class="isbanji">
<!-- <el-button type="text" @click="isshow = true">打开嵌套表单的 Dialog</el-button> -->

<el-dialog title="请选择班级" visible.sync="false">
  <el-form :model="xgbj">
 <el-select v-model="xgbj.cid" placeholder="请选择">
    <el-option
      v-for="item in banjilist"
      :key="item.cid"
      :label="item.className"
      :value="item.cid">
    </el-option>
  </el-select>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">取 消</el-button>
    <el-button type="primary" @click="xgxinxi">确 定</el-button>
  </div>
</el-dialog>
</div>

    </div>
</template>

<script>
import {http} from '../../uitl/request'
import Side from './side.vue'
import Header from './heard.vue'
import { getToken } from '@/api/login'
export default {
 name:'vue-index',
 created(){
   this.getuserinfo()
   
 },
   data(){
       return{
        userinfo:{addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''},
        isxg:false,
        isshow:false,
        banjilist:[],
        xgbj:{}
       }
   },
   methods:{
//获取初始化数据
   async getuserinfo(){
     const token=getToken()
try{
 if(token!=null){
const {data:res}=await http.get('/user/findLoginUser')
this.xgbj=res.data
this.$store.dispatch('setuserinfo',res.data)
// const banji=await http.post('/class/getClassList')
// this.banjilist=banji.data.data
if (res.data.level<3) {
   if(res.data.cid===0){
this.isshow=true
 }else{
   //this.$router.push('/xuesheng')
 }
}
}
}catch(err){
  Promise.reject(err)
}
},

changebtn(val){
  this.isxg=true
  this.userinfo=val
//console.log(val);
//console.log(this.$store.state.userinfo);
},
//发送修改请求
async xgbtn(){
try {
  const {data:res}=await http.put('/user/updateUser',this.userinfo)
  this.$message({type:'success',message:res.data})
  this.userinfo={addr:'',birthday:'',gender:'男',level:1,nickName:'',password:'',realName:'',username:''}
  this.isxg=false
this.$router.go()
} catch (err) {
   this.isxg=false
  Promise.reject(err)
}
},
//修改班级信息
async xgxinxi(){
 try {
 if(this.xgbj.cid===0){
this.isshow=true
this.$message({type:'warning',message:'请选择班级'})
  }else{
     const {data:res}=await http.put('/user/updateUser',this.xgbj)
  this.$message({type:'success',message:res.data})
   const list=await http.get('/user/findLoginUser')
this.$store.dispatch('setuserinfo',list.data.data)
this.xgbj=list.data.data
this.isshow=false
//this.$router.push({path:'/xuesheng',query:this.xgbj})
  }

} catch (err) {
  Promise.reject(err)
}
},
   },
   components:{
     Side,Header
   }
}
</script>

<style scoped>
.demo-ruleForm{
  padding: 5px 10px;
}
.btn{
  margin-left:500px ;
}
.el-icon-close:before{
  position: absolute;
  right: 10px;
  top: 3px;
  size: 20px;
}
.bianj{
  width: 1000px;
 
  background: rgb(71, 105, 220);
  position: relative;
  left: 300px;
  top: -550px;
}
.aside{
height:1000px;
}
.el-header{
  background: rgb(71, 105, 220) !important;
}
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>